<template>
  <view class="profile-container">
    <!-- 头部头像区域 -->
    <view class="profile-header">
      <view class="avatar-section">
        <view class="avatar-container" @click="changeAvatar">
          <image :src="userInfo.avatar" class="avatar" />
        </view>
        <text class="change-avatar-text">点击更换头像</text>
      </view>
    </view>
    
    <!-- 个人信息表单 -->
    <view class="profile-form">
      <view class="form-section">
        <view class="section-title">基本信息</view>
        
        <view class="form-item">
          <text class="item-label">昵称</text>
          <input 
            class="item-input" 
            v-model="userInfo.nickname" 
            placeholder="请输入昵称"
            maxlength="20"
          />
        </view>
        
        <view class="form-item">
          <text class="item-label">手机号</text>
          <text class="phone-text">{{userInfo.phone || '未绑定'}}</text>
        </view>
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="save-section">
      <button class="save-btn" @click="saveProfile">保存修改</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        nickname: '用户昵称',
        phone: '138****8888'
      }
    }
  },
  
  onLoad() {
    this.loadUserInfo()
  },
  
  methods: {
    loadUserInfo() {
      const savedUserInfo = uni.getStorageSync('userInfo')
      if (savedUserInfo) {
        this.userInfo = { ...this.userInfo, ...savedUserInfo }
      }
    },
    
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
          uni.showToast({
            title: '头像已更新',
            icon: 'success'
          })
        }
      })
    },
    
    saveProfile() {
      if (!this.userInfo.nickname.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({ title: '保存中...' })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.setStorageSync('userInfo', this.userInfo)
        
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
  
  .avatar-section {
    text-align: center;
    
    .avatar-container {
      display: inline-block;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        border: 6rpx solid rgba(255, 255, 255, 0.3);
      }
    }
    
    .change-avatar-text {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.profile-form {
  .form-section {
    background-color: #ffffff;
    margin-bottom: 40rpx;
    
    .section-title {
      padding: 30rpx 40rpx 20rpx;
      font-size: 28rpx;
      color: #999999;
      background-color: #f8f8f8;
    }
    
    .form-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-label {
        width: 160rpx;
        font-size: 30rpx;
        color: #333333;
        flex-shrink: 0;
      }
      
      .item-input {
        flex: 1;
        font-size: 30rpx;
        color: #333333;
        text-align: right;
      }
      
      .phone-text {
        flex: 1;
        font-size: 30rpx;
        color: #333333;
        text-align: right;
      }
    }
  }
}

.save-section {
  padding: 0 40rpx;
  
  .save-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style> 